<template>
    <div class="goSearch">
        <!-- 搜索 -->
        <div class="Search">
            <svg @click="$router.back()" class="icon" aria-hidden="true">
              <use xlink:href="#icon-fanhui"></use>
            </svg>
            <sear-compot/>
        </div>
        <!-- 搜索内容 -->
        <div class="content" v-if="count != 0">
            <div class="item" v-for="testdata in searchData" :key="testdata.id" @click="godetail(testdata.id)">
                <div class="box">
                    <div class="left">
                        <img :src="testdata.img1" alt="">
                    </div>
                    <div class="right">
                        <div class="title">
                            <span class="titleAndPrice_tle">{{testdata.goodname}}<span>(约{{testdata.weight}}斤,礼盒装)</span></span>
                            <p>{{testdata.label}}</p>
                        </div>
                        <div class="price">
                            <div class="price-l">
                                <span class="disPrices">￥{{testdata.price}}</span>
                                <span class="origPrice">￥{{testdata.org_price}}</span>
                            </div>
                            <!-- <span class="addCar" @click="handleAddToCart(litem)">加入购物车</span> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>没有此商品</div>
    </div>
</template>
<script>
    import {searchProduct} from '@/apis/searchApi'
    export default {
        data(){
            return{
                searchData:null,
                count: 0,
                Text:this.$store.getters['searchModule/getText']
            }
        },
        created() {
            searchProduct(this.Text)
            .then(data => {
                this.searchData = data.data.infoarr
                // console.log('数据',this.searchData);
                this.count = data.data.count
                // console.log('-----------',this.count);
            })
        },
        methods: {
            godetail(id){
                    this.$route.push({
                        name:'detail',
                        params:{
                            id
                        }
                    })
                
                
            }
        },
    }
</script>
<style lang="less" scoped>
    .goSearch{
        padding: 1rem;
        // 搜索
        .Search{
            display: flex;
            justify-content:start;
            align-items: center;
            svg{
                width: 1rem;
                height: 3rem;
            }
            .search{
                flex: 1;
                margin-left: .8rem;
            }
        }
        // 搜索内容
        .content{
            margin-top: .5rem;
            .item{
                padding: .5rem 0;
                border-bottom: 1px solid #e9e9e9;
                .box{
                    display: flex;
                    justify-content: start;
                    .left{
                        width: 5rem;
                        height: 5rem;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .right{
                        flex: 1;
                        margin-top: 18px;
                        margin-left: 5px;
                        p{
                            color: #c6c6c6;
                            margin-top:14px;
                        }
                        .pirce-style{
                            width: 100%;
                            margin-top: 20px;
                            margin-right: 20px;
                            display: flex;
                            justify-content: space-between;
                            .pirce-style-l{
                                width: 90px;
                                .pirce{
                                    font-size: .8rem;
                                    color: red;
                                    // line-height: 34px;
                                }
                                .ogpirce{
                                    font-size: .4rem;
                                    color: #c6c6c6;
                                    text-decoration: line-through;
                                    line-height: 1.5rem;
                                }
                            }
                            .addCarIcon{
                                display: block;
                                font-size: 1.25rem;
                                color: white;
                                width: 1.25rem;
                                height: 1.25rem;
                                text-align: center;
                                line-height: 22px;
                                background: #00b578;
                                border-radius: 50% 50%;
                                margin-right: .5rem;
                            }
                        }
                    }
                }
                
            }
        }
    }
</style>